import React,{useState} from 'react'
import withRouter from '../hoc/withRouter'

function Menu(props) {

 const [menuData]=useState([
    {
        id:0,
        name:'运营',
        children:[
            {
                id:'01',
                name:'控制台',
                path:'dashboard',
                meta:{
                    parent:'运营',
                    current:'控制台'
                }
            }
        ]
    },
    {
      id:1,
      name:'商品',
      children:[
        {
            id:11,
            name:'商品管理',
            path:'productMgr',
            meta:{
                parent:'商品',
                current:'商品管理'
            }
        },
        {
            id:12,
            name:'商品分类',
            path:'productCate',
            meta:{
                parent:'商品',
                current:'商品分类'
            }
        },
        {
            id:13,
            name:'商品的评论',
            path:'productComment',
            meta:{
                parent:'商品',
                current:'商品的评价'
            }
        }
      ]  
    },
    {
        id:2,
        name:'用户',
        children:[
            {
                id:21,
                name:'用户管理',
                path:'userMgr',
                meta:{
                    parent:'用户',
                    current:'用户管理'
                }
            },
            {
                id:22,
                name:'用户标签',
                path:'userLabel',
                meta:{
                    parent:'用户',
                    current:'用户标签'
                }
            },
            {
                id:23,
                name:'用户等级',
                path:'userLevel',
                meta:{
                    parent:'用户',
                    current:'用户等级'
                }
            }
        ]
    }
 ])
const routerGo=(path,meta)=>{
    /*
        useNavigate钩子函数返回的是一个路由跳转的方法，该方法的参数如下
        1、目标跳转的路径
        2、配置对象
          nav(`/home/${path}`,{
        state:meta
        })
        
    */
   console.log('props',props);
    props.navigate(`/home/${path}`,{
        state:meta
    })
}
  return (
    
    <div>
        <div style={{color:'#fff',marginLeft:'20px'}}>
           <ul>
              {menuData.map(item=><li key={item.id}>
                 <div>{item.name}</div>
                 <ul>                 {
                    item.children&&item.children.length>0&&item.children.map(sitem=><li style={{marginLeft:'10px'}} key={sitem.id}>
                        <div onClick={()=>routerGo(sitem.path,sitem.meta)}>{sitem.name}</div>
                    </li>)
                 }
                 </ul>

              </li>)}
           </ul>
        </div>
    </div>
  )
}

export default withRouter(Menu)
